<template>
  <VueBetterScroll
    ref="scroll"
    style="height: 100vh"
    :pullDownRefresh="pullDownRefreshObj"
    @pulling-down="onPullingDown"
  >
    <div class="reward_con">
      <!-- 车票 红包 现金 -->

      <!-- 有一等奖 -->
      <template v-if="prizeListM.isFirstPrize == '1'">
        <div class="prize_list">
          <!-- 一等奖 -->
          <div class="prize_first">
            <div class="prize_first--con">
              <img :src="img9" alt="" class="prize_first--img" />
              <div>
                <p class="title">车票报销</p>
                <p class="info">最高报销666元</p>
              </div>
            </div>
            <div class="prize_first--alipay" @click="openAlipay">
              {{ isEdit ? "编辑支付宝信息" : "填写支付宝信息" }}
            </div>
          </div>
          <!-- 红包 现金 -->
          <div class="prize_other">
            <div class="other_red other_item">
              <div class="item_title">获得红包（个）</div>
              <div class="item_content">
                <div class="text_overflow item_red">
                  {{ prizeListM.redPackageNum }}
                </div>
                <div class="item_btn" @click="openRedList">查看红包</div>
              </div>
            </div>

            <div class="other_cash other_item">
              <div class="item_title">现金账户（元）</div>
              <div class="item_content item_diff">
                <div class="text_overflow item_red">
                  {{ prizeListM.cashAmount }}
                </div>
                <div
                  :class="[
                    'item_btn',
                    'text_overflow',
                    Number(prizeListM.cashAmount) > 0 ? '' : 'disable_btn_bg'
                  ]"
                  @click="getCash"
                >
                  {{ cashTextObj[cashType] }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <!-- 没有一等奖 -->
      <template v-else>
        <div class="prize_other2 ">
          <div class="other_red other_item">
            <div class="item_title">获得红包（个）</div>
            <div class="item_content">
              <div class="text_overflow item_red">
                {{ prizeListM.redPackageNum }}
              </div>
              <div class="item_btn" @click="openRedList">查看红包</div>
            </div>
          </div>

          <div class="other_cash other_item">
            <div class="item_title">现金账户（元）</div>
            <div class="item_content item_diff">
              <div class="text_overflow item_red">
                {{ prizeListM.cashAmount }}
              </div>
              <div
                :class="[
                  'item_btn',
                  'text_overflow',
                  Number(prizeListM.cashAmount) > 0 ? '' : 'disable_btn_bg'
                ]"
                @click="getCash"
              >
                {{ cashTextObj[cashType] }}
              </div>
            </div>
          </div>
        </div>
      </template>

      <!-- tab 切换表格 -->
      <Tab :tabType="tabType" class="tab_con" @toggle="toggle">
        <template v-slot:tab2>
          <div class="tab_record--unchecked">提现记录</div>
        </template>

        <template v-slot:tab1>
          <div class="tab_record--checked">中奖记录</div>
        </template>

        <template v-slot:tab4>
          <div class="tab_record--checked">提现记录</div>
        </template>

        <template v-slot:tab3>
          <div class="tab_record--unchecked">中奖记录</div>
        </template>
      </Tab>

      <div class="reward_list">
        <template v-if="list.length > 0">
          <div
            :key="index"
            class="reward_list--item"
            v-for="(item, index) in list"
          >
            <template v-if="!tabType">
              <div class="left">
                {{ item.prizeDate }}
                <span class="left_inner">{{
                  typePrize[item.prizeType || 0]
                }}</span>
              </div>

              <div class="right" v-if="item.prizeName">
                {{ item.prizeName }}
              </div>
            </template>
            <template v-if="tabType">
              <div class="left">{{ item.cashTime }}</div>
              <div class="right">{{ item.amount }}元</div>
            </template>
          </div>
          <img :src="noMore" alt="" class="no_more" />
        </template>

        <template v-else>
          暂无记录
        </template>
      </div>

      <van-overlay :show="modalStatus.isAlipay" v-if="modalStatus.isAlipay">
        <div class="help_modal">
          <p class="sm_text">请在7月22日 23:59:59 前填写支付宝信息</p>
          <p class="lg_text">车票核实后将为您打款报销</p>
          <AlipayForm
            :isUpdate="Boolean(prizeListM.account)"
            :isInReward="true"
          />
          <img :src="close01" alt="" class="help_close" @click="closeAlipay" />
        </div>
      </van-overlay>
    </div>
  </VueBetterScroll>
</template>

<script>
import { Overlay, Toast, Dialog } from "vant";
import Tab from "@/components/tab";
import { isLogin } from "@/utils/login";
import AlipayForm from "@/components/alipayForm";
import { img9, close01, noMore } from "@/constant";
import { toRedPocket, getEnv } from "@/utils/util";
import { cashApi } from "@/service";
import VueBetterScroll from "vue2-better-scroll";

const cashTextObj = {
  0: "立即提现",
  1: "去小程序提现",
  2: "立即提现",
  3: "去小程序提现"
};

const typePrize = {
  1: "一等奖",
  2: "二等奖",
  3: "三等奖"
};

export default {
  components: {
    Tab,
    [Overlay.name]: Overlay,
    [Dialog.name]: Dialog,
    AlipayForm,
    VueBetterScroll
  },
  data: function() {
    return {
      tabType: false,
      img9,
      close01,
      noMore,
      cashTextObj,
      pullDownRefreshObj: {
        threshold: 90,
        stop: 40
      },
      typePrize
    };
  },
  computed: {
    prizeListM() {
      return this.$store.state.prizeListM;
    },
    modalStatus() {
      return this.$store.state.modalStatus;
    },
    list() {
      const { cashList, prizeList } = this.prizeListM;
      return this.tabType ? cashList : prizeList;
    },
    isEdit() {
      const { account } = this.prizeListM;
      return account;
    },
    mainPage() {
      return this.$store.state.mainPage;
    },
    // 0 小程序 可以提现
    // 1 客户端 可以提现
    // 2 小程序 不可以提现
    // 3 客户端 不可以提现
    cashType() {
      const { env } = this.$store.state.app;

      const { prizeListM } = this;
      if (Number(prizeListM.cashAmount) > 0) {
        if (env === "mini") return 0;
        else return 1;
      } else {
        if (env === "mini") return 2;
        else return 3;
      }
    }
  },
  methods: {
    async onPullingDown() {
      await this.$store.dispatch("reward");
      this.$refs.scroll.forceUpdate(true);
    },
    async getCash() {
      const { cashType } = this;
      const { recordId } = this.mainPage;
      const { cashAmount } = this.prizeListM;

      if (cashType == "2" || cashType == "3")
        return Toast("您的现金账户为空，无法提现~");
      // app 打开小程序
      if (cashType == "1") {
        let url = `${location.origin}${location.pathname}#/reward`;
        let miniParams = {
          path: `pages/web/web?url=${encodeURIComponent(
            `${url}?isskey=1&pageIndex=wx&recordId=${recordId}`
          )}`,
          userName: "gh_0aacaec14151"
        };
        bridge.utilsPlugins.openMiniProgram(miniParams);
        return;
      }
      if (cashType == "0") {
        Dialog.confirm({
          title: `您确定提现${cashAmount}元吗？`,
          message: "提现金额将存入您的微信-钱包-零钱中"
        })
          .then(async () => {
            try {
              await cashApi();
            } catch (e) {
              console.log(e);
            }

            this.$store.dispatch("reward");
            return;
          })
          .catch(() => {
            console.log(111);
          });
      }
    },
    openAlipay() {
      this.$store.commit("changeAlipay", true);
    },
    toggle() {
      this.tabType = !this.tabType;
    },
    closeAlipay() {
      this.$store.commit("changeAlipay", false);
    },
    openRedList() {
      toRedPocket();
    }
  },
  async created() {
    const env = await getEnv();
    const res = await isLogin();
    this.$store.commit("changeEnv", env);
    this.$store.commit("changeIsLogin", res);

    try {
      await this.$store.dispatch("reward");
    } catch (e) {
      console.log(e);
    }

    bridge.naviPlugins.setNaviTitle({
      title: "全网车票 我来报销",
      navigationStyle: "white",
      backKeyCallback: function() {
        window.history.back();
      }
    });
  }
};
</script>

<style lang="scss" scoped>
@import "@/app.scss";

.reward_con {
  background-color: rgba(245, 245, 246, 0.5);
  width: 100vw;
  height: calc(100vh + 2px);
  box-sizing: border-box;
  padding: 44px 44px 0 34px;
  box-sizing: border-box;

  .tab_con {
    margin-top: 20px;
  }

  .tab_record--unchecked {
    font-size: 32px;
    font-weight: 500;
    color: #999999;
  }

  .tab_record--checked {
    font-size: 34px;

    font-weight: bold;
    color: #040404;
    position: relative;

    &:before {
      content: " ";
      position: absolute;
      width: 98px;
      height: 6px;
      background: rgba(254, 12, 20);
      bottom: -35px;
      left: 50%;
      transform: translate(-50%, 0);
    }
  }

  .reward_list {
    height: 600px;
    background-color: #fff;
    border-radius: 0 0 15px 15px;
    padding: 50px 30px;
    text-align: center;
    font-size: 26px;
    overflow: auto;
    .reward_list--item {
      margin: 40px 10px;
      // width: 100%;
      @include flex_config(space-between, center, row);

      .left {
        font-size: 26px;

        font-weight: 500;
        color: #333333;
        .left_inner {
          margin-left: 100px;
        }
      }
      .right {
        font-size: 26px;
        font-weight: 600;

        color: #333333;
      }
    }

    .no_more {
      width: 200px;
    }
  }

  .prize_list {
    border-radius: 30px;
    background-color: #fff;
    box-sizing: border-box;
    padding-bottom: 30px;
    .prize_first {
      padding: 64px 33px;

      background: linear-gradient(180deg, #fee7e5, #ffffff);
      @include flex_config(space-between, flex-end, row);

      .prize_first--con {
        @include flex_config(center, flex-end, row);
      }

      .title {
        font-size: 31px;

        font-weight: 800;
        color: #303030;
        margin-bottom: 19px;
      }
      .info {
        font-size: 26px;

        font-weight: 500;
        color: #333333;
      }
      .prize_first--img {
        width: 92px;
        margin-right: 42px;
        margin-left: 18px;
      }

      .prize_first--alipay {
        width: 172px;
        height: 55px;
        line-height: 55px;
        text-align: center;
        font-size: 20px;

        background: #fe0c14;
        box-shadow: 0px 5px 40px 0px rgba(254, 12, 20, 0.35);
        border-radius: 28px;
        color: #ffffff;
      }
    }

    .prize_other {
      @include flex_config(space-between, center, row);
      padding: 0 32px;

      .other_item {
        width: 48%;
        background: #fee7e5;
        border: 1px solid #ffa5a8;
        border-radius: 20px;
        padding: 25px 18px 10px 18px;
        // min-height: 151px;

        .item_title {
          font-size: 28px;

          font-weight: 800;
          color: #303030;
        }

        .item_content {
          font-size: 52px;

          // font-weight: 800;
          color: #fe0c14;
          @include flex_config(space-between, flex-end, row);

          .item_red {
            font-size: 35px;
            font-weight: 800;
            color: #fe0c14;
          }
          .item_btn {
            width: 137px;
            height: 46px;
            // line-height: 46px;
            padding: 6px;
            text-align: center;
            background: #fe0c14;
            border-radius: 23px;
            font-size: 20px;
            font-weight: 800;
            color: #ffffff;
            margin-top: 28px;
            @include flex_config(center, center, row);
          }
        }

        // .item_diff {
        //   @include flex_config(space-between, center, row);
        // }
      }

      .other_cash {
      }

      .other_red {
        margin-right: 16px;
      }
    }
  }
  .prize_other2 {
    @include flex_config(space-between, center, row);
    padding: 0;

    .other_item {
      width: 48%;
      background: #fee7e5;
      border: 1px solid #ffa5a8;
      border-radius: 20px;
      padding: 25px 18px 10px 18px;
      // min-height: 151px;

      .item_title {
        font-size: 28px;

        font-weight: 800;
        color: #303030;
      }

      .item_content {
        font-size: 52px;

        // font-weight: 800;
        color: #fe0c14;
        @include flex_config(space-between, flex-end, row);

        .item_red {
          font-size: 35px;

          font-weight: 800;
          color: #fe0c14;
        }

        .item_btn {
          width: 137px;
          height: 46px;
          // line-height: 46px;
          padding: 6px;
          text-align: center;
          background: #fe0c14;
          border-radius: 23px;
          font-size: 20px;
          font-weight: 800;
          color: #ffffff;
          margin-top: 28px;
          @include flex_config(center, center, row);
        }
      }
    }

    .other_cash {
    }

    .other_red {
      margin-right: 16px;
    }
  }
}

.help_modal {
  width: 585px;
  min-height: 650px;
  background: #ffffff;
  border-radius: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  padding: 74px 33px 48px 33px;
  box-sizing: border-box;
  text-align: center;

  .sm_text {
    font-size: 24px;

    font-weight: bold;
    color: #333333;
  }

  .lg_text {
    font-size: 36px;

    font-weight: bold;
    color: #323232;
    margin: 26px auto 74px auto;
  }

  .help_close {
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 72px;
  }
}

.disable_btn_bg {
  background: #adadad !important;
}
</style>

<style>
.after-trigger {
  /* color: #fff !important; */
  color: #000 !important;

  font-size: 32px !important;
}
</style>
